<template>
  <div class="intelligent-assistance-page">
    <div class="header-content common-style">
      <p class="page-title">智能坐席辅助</p>
    </div>

    <div class="body-content">
      <div class="body-left common-style">
        <div class="common-title">场景质检</div>

        <ul class="left-list">
          <li
            v-for="(item, index) in allDetails.templateItemList"
            :key="index"
            :class="{ success: item.status === 'start' }"
          >
            <span class="title">{{ item.name }}</span>
            <Icon type="ios-checkmark-circle" />
          </li>
        </ul>
      </div>
      <div class="body-center common-style">对话框</div>
      <div class="body-right common-style">
        <div class="common-title">监控状态</div>

        <ul class="monitor-list">
          <li
            v-for="(item, index) in allDetails.statusMonitorList"
            :key="index"
            :class="{ success: item === 1 }"
          >
            <!-- <Icon type="ios-egg-outline" /> -->
            <span class="title">{{item.name}}</span>
            <span class="status">[正常]</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer-content common-style">
      <div class="footer-left common-style">
        <div class="common-title">场景话术</div>

        <ul class="scene-list">
          <li v-for="(item, index) in allDetails.salesPitchList" :key="index">
            <span class="title">{{ item.name }}</span>
          </li>
        </ul>
      </div>

      <div class="footer-center common-style">
        <div class="common-title">知识库</div>

        <div class="nav">
          <div
            v-for="(value, key) in KNOW_OPTIONS"
            :key="key"
            :class="{ active: key === knowCurrent }"
            @click="knowCurrent = key"
          >
            {{ value.label }}
          </div>
        </div>

        <div class="content">
          <div class="item" v-for="item in allDetails[knowCurrent]" :key="item.id">
            <div class="title">问题: {{ item[KNOW_OPTIONS[knowCurrent].titleKey] }}</div>
            <div class="answer">回答: {{ item[KNOW_OPTIONS[knowCurrent].contentKey] }}</div>
          </div>
        </div>
      </div>

      <div class="footer-right">
        <div class="common-style">
          <div class="common-title">智能标签</div>

          <div class="tag-list">
            <Tag v-for="item in 4" :key="item" color="primary">HM3100</Tag>
          </div>
        </div>

        <div class="common-style">
          <div class="common-title">用户画像</div>

          <div class="tag-list">
            <Tag v-for="item in 4" :key="item" color="primary">意向用户</Tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, computed, nextTick, getCurrentInstance } from 'vue'
import { Message } from 'view-ui-plus'
import { intelligenIndex } from '@/api/modules/intelligentAssistance'
import { all } from 'axios'

const KNOW_OPTIONS = {
  faqlist: {
    label: 'FAQ',
    titleKey: 'title',
    contentKey: 'content'
  },
  knowlegelist: {
    label: '知识库',
    titleKey: 'name',
    contentKey: ''
  }
}
// 当前对象
const { proxy } = getCurrentInstance()

const knowCurrent = ref(Object.keys(KNOW_OPTIONS)[0])
const allDetails = ref({})
const getData = () => {
  intelligenIndex().then(({ data }) => {
    console.log(data)
    allDetails.value = data
  })
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.intelligent-assistance-page {
  padding-right: 8px;
  .common-style {
    background-color: #fff;
    border-radius: 4px;
  }

  .common-title {
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
  }

  .header-content {
    height: 40px;
    .page-title {
      font-size: 16px;
      font-weight: bold;
      line-height: 40px;
      padding-left: 16px;
    }
  }
  .body-content {
    display: flex;
    height: 600px;
    margin: 8px 0;
    .body-left {
      width: 400px;
      .left-list {
        height: calc(100% - 40px);
        padding: 12px;
        overflow-y: auto;
        li {
          cursor: pointer;
          display: flex;
          align-items: center;
          color: #999;
          &:nth-child(n + 2) {
            margin-top: 16px;
          }
          &.success {
            color: #1676ff;
          }
          .ivu-icon-ios-egg-outline {
            transform: rotate(180deg);
            font-size: 16px;
          }
          .title {
            margin-left: 8px;
          }
          .ivu-icon-ios-checkmark-circle {
            margin-left: auto;
            font-size: 18px;
          }
        }
      }
    }
    .body-center {
      flex: 1;
      margin: 0 8px;
    }
    .body-right {
      width: 400px;
      .monitor-list {
        overflow-y: auto;
        padding: 12px;
        height: 550px;
        > li {
          border: 1px solid #ddd;
          border-radius: 4px;
          height: 40px;
          display: flex;
          align-items: center;
          padding: 0 8px;
          &:nth-child(n + 2) {
            margin-top: 8px;
          }
          .title {
            font-weight: bold;
          }
          .status {
            margin-left: auto;
            color: #1676ff;
          }
        }
      }
    }
  }
  .footer-content {
    min-height: 270px;
    height: calc(100vh - 760px);
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    background-color: unset;
    .footer-left {
      height: 100%;
      .scene-list {
        overflow-y: auto;
        padding: 12px;
        height: calc(100vh - 812px);
        min-height: 219px;
        > li {
          border: 1px solid #ddd;
          border-radius: 4px;
          min-height: 40px;
          display: flex;
          align-items: center;
          padding: 0 8px;
          &:nth-child(n + 2) {
            margin-top: 8px;
          }
        }
      }
    }
    .footer-center {
      margin: 0 8px;
      .nav {
        display: flex;
        align-items: center;
        padding: 12px 12px 0;
        > div {
          padding: 2px 4px;
          border: 1px solid #ddd;
          cursor: pointer;
          &:first-child {
            border-radius: 4px 0 0 4px;
          }
          &:nth-child(2) {
            border-radius: 0 4px 4px 0;
          }
          &.active {
            border-color: #1676ff;
            color: #1676ff;
          }
        }
      }

      .content {
        overflow-y: auto;
        padding: 8px 12px 12px;
        height: calc(100vh - 842px);
        min-height: 180px;
        .item {
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 8px;
          margin-bottom: 8px;
          .title {
            font-weight: bold;
          }
          .answer {
            color: #999;
            word-break: break-all;
          }
        }
      }
    }
    .footer-right {
      width: 400px;
      display: grid;
      height: calc(100vh - 762px);
      min-height: 219px;
      overflow-y: auto;
      gap: 8px;
      .common-style {
        .tag-list {
          padding: 12px;
          overflow-y: auto;
        }
      }
    }
  }
}
</style>
